<template>
  <div>
    姓氏:<input v-model="fristName" />
  </div>
  <div>
    名字:<input v-model="lastName" />
  </div>
  <div>姓名:{{fullName}}</div>
  <div>
    对象监听:<input v-model="user.name" />
  </div>
  <div>this is a good teacher</div>
</template>

<script>
import { ref, computed, reactive, watch, watchEffect } from 'vue'
export default {
  setup () {
    let fristName = ref('')
    let lastName = ref('')
    let fullName = computed(() => {
      return fristName.value + lastName.value;
    });
    watch(lastName, (now, old) => {
      console.log("lastName新值:", now);
      console.log("lastName旧值:", old);
    });
    const user = reactive({ name: '张三' })
    //watch 目前只能监听到对象的某个属性
    watch(() => user.name, (now, old) => {
      console.log("user.name新值:", now);
      console.log("user.name旧值:", old);
    }, {
      //页面渲染默认就会监听
      immediate: true,
      deep: true
    });
    //watch 目前只能监听到对象的某个属性 首次也会监听	
    watchEffect(() => {
      console.log('-------watchEffect--------');
      console.log(fristName.value);
      console.log(user.name);
    })
    return { fullName, fristName, lastName, user }
  }
}
</script>

<style>
</style>